<template>
    <div class="container">
        <div class="hang-actions">
            <el-button type="danger">一键撤单</el-button>
            <el-button type="primary" class="ml-10">清理挂机记录</el-button>
            <span class="ml-20">开启投注</span>
            <el-switch class="ml-5" v-model="bettingEnabled" />
        </div>
        <el-table :data="tableData" style="width: 100%; margin-top: 20px" empty-text="暂无数据" border>
            <el-table-column prop="index" label="序号" width="60" align="center" />
            <el-table-column prop="realBet" label="真实投注" align="center" />
            <el-table-column prop="planName" label="方案名称" align="center" />
            <el-table-column prop="lottery" label="彩种" align="center" />
            <el-table-column prop="play" label="玩法" align="center" />
            <el-table-column prop="number" label="号码" align="center" />
            <el-table-column prop="periods" label="投注期数" align="center" />
            <el-table-column prop="progress" label="进度/周期" align="center" />
            <el-table-column prop="status" label="状态" align="center" />
            <el-table-column prop="action" label="操作" align="center" />
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const bettingEnabled = ref(false)
const tableData = ref([]) // 暂无数据
</script>

<style scoped lang="scss">
@use "@/assets/global.scss" as *;

.hang-actions {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-20 {
    margin-left: 20px;
}
</style>